<template>
  <div class="venuePage">
    <div v-for="(item, index) in gameList" :key="'sport-game-item-' + index">
      <div
        class="venuePage_bg"
        v-show="item.hasActive"
        :style="'background-image: url(' + item.backgroundImg + ')'"
      ></div>
      <div v-show="item.hasActive" class="venuePage_inner">
        <div class="venuePage_content">
          <div class="venuePage_left">
            <h2 class="title">{{ item.label }}</h2>
            <p class="desc">
              {{ item.desc }}
            </p>
            <button style="color: rgb(0, 58, 158)" @click="playAGame(item)">
              进入游戏
            </button>
          </div>
          <!-- <div class="venuePage_img" style="right: -18px; top: 47px">
                <img src="img/ba188_img.087707a9.png" width="824" />
              </div> -->
        </div>
      </div>
    </div>

    <div class="venuePage_tab sport_tab">
      <ul>
        <li
          v-for="(item, index) in gameList"
          :key="'sport-game-tab-' + index"
          :class="item.hasActive ? 'active' : ''"
          @click="onTabSwitched(item.name)"
        >
          {{ item.label }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, type PropType } from "vue";
import { useGameInfoStore } from "@/stores/gameInfo";
import { getToken } from "@/utils/token";
import { Modal } from "ant-design-vue";
import router from "@/router";
import { useI18n } from "vue-i18n";
import { objectToQueryString } from "@/utils";
const { t } = useI18n();


const props = defineProps({
    // 游戏大类
    gameKind: {
        type: String,
        required: true,
    },
    // 对应游戏背景图片映射
    gameBgImages: {
        type: Object as PropType<any>,
        required: true,
    }
})

const curGameKind = props.gameKind; //  "Casino";
const gameInfoStore = useGameInfoStore();
const gameList = ref<any[]>([]);
const curGameTab = ref<string>("");
// {
//   "SEXY 真人":
//     "https://goalgold.obs.ap-southeast-1.myhuaweicloud.com/game-details/casino00001.png",
//   OG: "https://goalgold.obs.ap-southeast-1.myhuaweicloud.com/game-details/casino00002.png",
//   WM: "https://goalgold.obs.ap-southeast-1.myhuaweicloud.com/game-details/casino00003.png",
//   "IBA 真人":
//     "https://goalgold.obs.ap-southeast-1.myhuaweicloud.com/game-details/casino00004.png",
//   bg: "https://goalgold.obs.ap-southeast-1.myhuaweicloud.com/game-details/casino00004.png",
// };
const backgroundList: any = props.gameBgImages;

watch(
  () => gameInfoStore.gameBannerList,
  (newVal) => {
    if (typeof newVal === "object") {
      const gameKindRes = newVal[curGameKind];
      if (gameKindRes && Array.isArray(gameKindRes.list)) {
        const newList = gameKindRes.list
          .filter((item: any) => item.game_kind === curGameKind)
        // 设置第一个tab勾选中        
        if (newList.length > 0) {
            curGameTab.value = newList[0].name;
        }
        const result =  newList.map((item: any) => {
            const bg = backgroundList[item.name];
            return {
              ...item,
              label: item.display_name,
              value: item.id,
              hasActive: curGameTab.value === item.name,
              backgroundImg: bg || "",
            };
          });
        gameList.value = result;
      }
    }
  },
  {
    deep: true,
    immediate: true,
  }
);

function onTabSwitched(name: string) {
  curGameTab.value = name;
  gameList.value = gameList.value.map((item) => {
    item.hasActive = item.name === name;
    return item;
  });
}
function isLoggedIn() {
  // 判断用户是否已经登录，这里可以根据自己的业务逻辑实现
  // 如果已经登录，返回 true，否则返回 false
  // 例如，如果用户已经登录，可以在本地存储中查找登录状态信息
  return !!getToken();
}

function playAGame(item: any) {
  const { id, channel_id, name, display_name, channel_name } = item;
  if (!isLoggedIn()) {
    Modal.confirm({
      title: t("wenX-1"),
      content: t("qing-20"),
      okText: t("queR-1"),
      cancelText: t("quXi"),
      onOk() {
        router.push({
          name: t("login"),
        });
      },
    });
    return;
  }
  const params = {
    game_type_id: id,
    game_channel_id: channel_id,
    name: channel_name,
    display_name: display_name,
    platform: 1,
    game_kind: curGameKind,
    game_channel_name: channel_name,
  };
  const queryString = objectToQueryString(params);
  window.open(`#/redirect/callback?${queryString}`, "_blank");
}

onBeforeMount(() => {
  gameInfoStore.updateGameBanner();
});
</script>

<style lang="less">
.venuePage {
  width: 100%;
  height: 950px;
  margin-top: -100px;
  padding-top: 100px;
  position: relative;
  overflow: hidden;
}

.venuePage_bg {
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  animation: bgScale 0.6s ease-in;
  animation-fill-mode: forwards;
  position: absolute;
  top: 0;
  left: 0;
}

@-webkit-keyframes bgScale {
  0% {
    transform: scale(1.02);
  }

  to {
    transform: scale(1);
  }
}

@keyframes bgScale {
  0% {
    transform: scale(1.02);
  }

  to {
    transform: scale(1);
  }
}

.venuePage_tab {
  width: 1300px;
  margin: 0 auto;
  position: relative;
}

.venuePage_tab ul {
  width: auto;
  display: flex;

  position: absolute;
  top: 93px;
  left: 0;

  // padding: 20px 50px 45px 55px;
  padding-left: 20px;
}

.venuePage_tab ul li {
  background-color: rgba(255, 255, 255, 0.17);

  color: rgba(255, 255, 255, 0.67);
  font-size: 22px;
  font-family: PingFang SC;
  letter-spacing: 0.88px;
  padding: 26px 17px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;

  &:first-child {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
  }
  &:last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
  }
}

.venuePage_tab ul li.active {
  color: #1200e5;
  font-size: 24px;
  font-weight: 600;
  background-color: rgba(255, 255, 255, 1);
}

.venuePage_inner {
  width: 1310px;
  margin: 0 auto;
  position: relative;
}

.venuePage_inner .venuePage_content .venuePage_left {
  // width: 490px;
  position: absolute;
  top: 237px;
  left: 26px;
  z-index: 1;
}
.venuePage_inner .venuePage_content .title {
  color: #fff;
  font-size: 90px;
  font-family: YouSheBiaoTiHei;
  margin-bottom: 24px;
}

.venuePage_inner .venuePage_content .venuePage_left p {
  color: #fff;
  line-height: 26px;
}

.venuePage_inner .venuePage_content .venuePage_left button {
  width: 174px;
  height: 52px;
  background-color: #fff;
  border-radius: 27px;
  font-size: 18px;
  font-weight: 500;
  margin-top: 52px;
  cursor: pointer;
  margin-bottom: 38px;
}

.venuePage_inner .venuePage_content .venuePage_left button.maintain_btn {
  background-color: #b50000;
  color: #fff;
  opacity: 0.7;
  cursor: auto;
}

.venuePage_inner .venuePage_content {
  position: relative;
}

.venuePage_inner .venuePage_content .venuePage_img {
  position: absolute;
  top: 47px;
  z-index: 1;
}
</style>
